<!--
TO DO LIST
//refresh datagrid
//load from grid to add/update form
//filter for current view grid
//find to grid
//russian letters!!!
-->
<!DOCTYPE HTML>
<html lang="ru">
    <head>
        <meta charset="utf-8">
        <title>!!!Demo: dojox/grid/DataGrid Simple Structure</title>
        <link rel="stylesheet" href="../dojo/dojo/resources/dojo.css" />
        <link rel="stylesheet" href="../dojo/dijit/themes/claro/claro.css" />
        <link rel="stylesheet" href="../dojo/dojox/grid/resources/Grid.css" />
        <link rel="stylesheet" href="../dojo/dojox/grid/resources/claroGrid.css" />
        <!--link rel="stylesheet" href="style.css" media="screen"-->
        <!--link rel="stylesheet" href="../../../resources/style/demo.css" media="screen"-->
        <script>dojoConfig = {parseOnLoad: true}</script>
        <script src='../dojo/dojo/dojo.js'></script>                

    </head>
    <!--body class="nihilo"-->
    <body class="claro">
        <!-- this div is only for documentation purpose, in real development environments, just take it out -->
        <script>
            require(["dojo/parser", "dijit/layout/TabContainer", "dijit/layout/ContentPane"]);
            require(["dojo/parser", "dijit/form/Form", "dijit/form/Button", "dijit/form/ValidationTextBox", "dijit/form/DateTextBox"]);
            
            
            dojo.require("dijit.form.Button");
            dojo.require("dijit.form.TextBox");
            dojo.require("dijit.form.CheckBox");

            function sendForm(){
                var form = dojo.byId("myForm");

                dojo.connect(form, "onsubmit", function(event){
                    // Stop the submit event since we want to control form submission.
                    dojo.stopEvent(event);

                    // The parameters to pass to xhrPost, the form, how to handle it, and the callbacks.
                    // Note that there isn't a url passed.  xhrPost will extract the url to call from the form's
                    //'action' attribute.  You could also leave off the action attribute and set the url of the xhrPost object
                    // either should work.
                    var xhrArgs = {
                        form: dojo.byId("myForm"),
                        handleAs: "text",
                        load: function(data){
                            dojo.byId("response").innerHTML = "Form posted.";
                        },
                        error: function(error){
                            // We'll 404 in the demo, but that's okay.  We don't have a 'postIt' service on the
                            // docs server.
                            dojo.byId("response").innerHTML = "Form posted.";
                        }
                    }
                    // Call the asynchronous xhrPost
                    dojo.byId("response").innerHTML = "Form being sent..."
                    var deferred = dojo.xhrPost(xhrArgs);
                });
            }
            dojo.ready(sendForm);
            function reloadGrid(){
                alert("!");
                grid.store.close();
                alert("!!!");
                grid.store.url = "sel";
                grid._refresh(); // or 
                grid.store.fetch();  
            }
          
                
        </script>
        <div style="height:320px;">
            <div data-dojo-type="dijit/layout/TabContainer" style="width: 100%;" doLayout="false">
                <div data-dojo-type="dijit/layout/ContentPane" title="Добавить/Редактировать" data-dojo-props="selected:true">
                    26   //название
                    //описание
                    //план 
                    ///открытие
                    ///фаза D
                    ///фаза M
                    ///фаза A
                    ///фаза I
                    ///фаза C

                    //РП

                    //Менеджер
                    <div data-dojo-type="dijit/form/Form" id="myForm" data-dojo-id="myForm"
                         encType="multipart/form-data" action="create" method="get">
                        <script type="dojo/on" data-dojo-event="reset">
                            return confirm('Press OK to reset widget values');
                        </script>

                        <script type="dojo/on" data-dojo-event="submit">
                            if(this.validate()){
                            return confirm('Form is valid, press OK to submit');
                            }else{
                            alert('Form contains invalid data.  Please correct first');
                            return false;
                            }
                            return true;
                        </script>

                        <table style="border: 1px solid #9f9f9f;" cellspacing="10">
                            <tr>
                                <td>
                                    <label for="name">Название:</label>
                                </td>
                                <td>
                                    <input type="text" id="name" name="param1" required="true" data-dojo-type="dijit/form/ValidationTextBox"/>
                                </td>
                                <td>
                                    <label for="name1">Описание</label>
                                </td>
                                <td>
                                    <input type="text" id="name1" name="param12" required="true" data-dojo-type="dijit/form/ValidationTextBox"/>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <label for="fasestart">Открытие проекта:</label>
                                </td>
                                <td>
                                    <input type="text" id="fasestart" name="param2" required="true"  data-dojo-type="dijit/form/DateTextBox"/>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <label for="faseD">Завершение фазы D:</label>
                                </td>
                                <td>
                                    <input type="text" id="faseD" name="param3" data-dojo-type="dijit/form/DateTextBox"/>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <label for="faseM">Завершение фазы M:</label>
                                </td>
                                <td>
                                    <input type="text" id="faseM" name="param4" data-dojo-type="dijit/form/DateTextBox"/>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <label for="faseA">Завершение фазы A:</label>
                                </td>
                                <td>
                                    <input type="text" id="faseA" name="param5" data-dojo-type="dijit/form/DateTextBox"/>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <label for="faseI">Завершение фазы I:</label>
                                </td>
                                <td>
                                    <input type="text" id="faseI" name="param6" data-dojo-type="dijit/form/DateTextBox"/>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <label for="faseC">Завершение фазы C:</label>
                                </td>
                                <td>
                                    <input type="text" id="faseC" name="param7" data-dojo-type="dijit/form/DateTextBox"/>
                                </td>
                            </tr>
                        </table>

                        <button data-dojo-type="dijit/form/Button" type="button" onClick="console.log(myForm.getValues())">Get Values from form!</button>
                        <button data-dojo-type="dijit/form/Button" type="submit" name="submitButton" value="Submit">Зарегестрировать</button>
                        <button data-dojo-type="dijit/form/Button" type="reset">Reset</button>
                    </div>                    
                </div>
                <div data-dojo-type="dijit/layout/ContentPane" title="Расширенный поиск" data-dojo-props="closable:false">


                </div>
                <div data-dojo-type="dijit/layout/ContentPane" title="Войти/Зарегистрироваться">

                </div>
            </div>
        </div>		
        <hr/>
        <div id="grid"></div>
        <!-- load dojo and provide config via data attribute -->
        <!--script src="../dojo/dojo/dojo.js" data-dojo-config="isDebug: true, async: true"></script-->
        <script>
            dojo.require("dojox.grid.DataGrid");
            dojo.require("dojox.data.CsvStore");
            dojo.require("dijit.form.Button");
            require([
                "dojox/grid/DataGrid",
                "dojo/store/Memory",
                "dojo/data/ObjectStore",
                "dojo/request",
                "dojo/domReady!"
            ], function(DataGrid, Memory, ObjectStore, request){
                var grid, dataStore;
                //request.get("hof-batting.json", {
                request.get("sel", {
                    handleAs: "json"
                }).then(function(data){
                    dataStore =  new ObjectStore({ objectStore:new Memory({ data: data.items }) });

                    grid = new DataGrid({
                        store: dataStore,
                        query: { id: "*" },
                        clientSort: true,
                        rowSelector: '10px',
                        queryOptions: {},
                        structure: [
                            { name: "ID", field: "col1", width: "25%" },
                            { name: "SDESCR", field: "col2", width: "25%" },
                            { name: "DESCR", field: "col3", width: "10%" },
                            { name: "CTIME", field: "col4", width: "10%" },
                            { name: "MTIME", field: "col5", width: "10%" },
                        ]
                    }, "grid");
                    grid.startup();
                });
            });
            
            
            
            

        </script>


        <hr/>
        <button data-dojo-type="dijit/form/Button" type="reset" onClick="reloadGrid()">Reset</button>
        <b>Result</b>
        <div id="response"></div>
    </body>
</html>
